'use client'
import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { useState } from "react";
import { useRouter } from 'next/navigation'
import styles from "./animation.module.css"
import PlayAnimation from "../../components/PlayAnimation";
import { Show } from "../../components/Show";

export default function Animation() {
    const [clicked, click] = useState("assemble")
    const router = useRouter()

    return (
        <div className={styles.container}>
            <button className='bg-green500' onClick={() => router.back()}>
                Click here to go back
            </button>
            <button onClick={() => click("disassemble")}>
                Разобрать
            </button>
            <button onClick={() => click("assemble")}>
                Собрать
            </button>

            <Canvas>
                <ambientLight intensity={2} />
                <PlayAnimation src="/assets/su57_anim.glb" state={clicked} />
                <OrbitControls />
            </Canvas>
        </div>
    )
}